<template>
    <div>

      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="id"
            width="100">
        </el-table-column>
        <el-table-column
            prop="cropName"
            label="作物名称"
            width="100">
        </el-table-column>
        <el-table-column
            prop="cropId"
            label="作物编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="ingredientsId"
            label="原料厂商编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="ingredientsName"
            label="原料厂商"
            width="150">
        </el-table-column>
        <el-table-column
            prop="cropName"
            label="作物名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="cropRule"
            label="吨数"
            width="150">
        </el-table-column>
        <el-table-column
            prop="stashId"
            label="kuqu"
            width="150">
        </el-table-column>
        <el-table-column
            prop="fsid"
            label="cangku"
            width="150">
        </el-table-column>
        <el-table-column
            prop="kname"
            label="仓库"
            width="150">
          <template v-slot="s">
            {{s.row.kname}}({{s.row.kqname}})
          </template>
        </el-table-column>
        <el-table-column
            prop="sname"
            label="加工厂"
            width="150">
        </el-table-column>
        <el-table-column
            prop="address"
            label="库区地址"
            width="150">
        </el-table-column>
        <el-table-column
            prop="snum"
            label="库存"
            width="150">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="入库时间"
            width="150">
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <span v-if="scope.row.snum!=0">
               <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-delete"
                   @click="gostorage(scope.row)"
                   v-hasPermi="['system:dict:remove']"
               >联系零售商</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="gopage"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>

      <el-drawer
          title="零售商"
          :visible.sync="drawer"
          :direction="direction"
          size="78%">

        <el-form :model="forms" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="作物编号">
            {{ forms.cropId }}
          </el-form-item>
          <el-form-item label="作物名称">
            {{ forms.cname }}
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="forms.num" :min="1" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="选择司机" >
            <el-select v-model="forms.haulerName" placeholder="请选择">
              <el-option v-for="user in driverList" :key="user.haulerName" :label="user.haulerName" :value="user.haulerName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择地址">
            <el-select v-model="forms.pid" placeholder="请选择">
              <el-option v-for="t in tradesmanList" :key="t.id" :label="t.tradesmanName" :value="t.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>



      </el-drawer>
    </div>
</template>

<script>
export default {
  name: "TakestockView.vue",
  data(){
    return{
      drawer: false,
      direction: 'rtl',
      tableData:[],
      cropperForm:{},
      stashList:[],
      open:false,
      size:3,
      total:0,
      current:1,
      formLabelWidth:'120px',
      fstashList:[],
      forms:{},
      driverList:[],
      tradesmanList:[],
    }
  },methods:{
    /**
     * 出库
     * @param done
     */
    submitForm(){
      this.axios.post("cropservice/outbound/transportAdd",this.forms).then(res=>{
        if (res.data.code==200){
          alert(res.data.data);
        }else {
          alert(res.data.msg);
        }
      })
    },
    openAdd(){
      this.open=true;
      this.getfstashList();

    },
    gopage(current){
      this.current=current;
      this.list();
    },
    changestashId(id){
      this.axios.post("/cropservice/crop/changestashId?id="+id).then(res=>{
        if(res.data.code==200){
          // this.cropperForm.stashId=null;
          this.stashList=res.data.data;
        }
      })
    },
    getfstashList(){
      this.axios.post("/cropservice/crop/getfstashList").then(res=>{
        if(res.data.code==200){
          this.fstashList=res.data.data;
        }
      })
    },
    goprocess(id){
      this.axios.post("/cropservice/crop/gopress?id="+id).then(res=>{
        if(res.data.code==200){
          alert("加工后的规则"+res.data.data);
          this.$message.success(res.data.msg);
          this.list();
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
      pandian(){
      this.axios.post("/cropservice/crop/gopan",this.cropperForm).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.open=false;
          this.list();
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    gostorage(row){
      console.log(row);
      this.forms.sid=row.stashId;
      this.forms.fsid=row.fsid;
      this.forms.cname=row.cropName;
      this.forms.cropId=row.cropId;
      this.drawer=true;
    },
    list(){
      this.axios.post("/cropservice/crop/stashcropList?current="+this.current+"&size="+this.size).then(res=>{
        if(res.data.code==200){
          this.tableData=res.data.data.list;
          this.total=res.data.data.total;
        }
      })
    }

  },created() {
      this.list();
  },mounted() {
    this.axios.get("cropservice/crop/getHaulerList").then(res=>{
      this.driverList=res.data.data;
    })
    this.axios.get("cropservice/outbound/list").then(res=>{
      this.tradesmanList=res.data.data;
    })
  }

}
</script>

<style scoped>

</style>